import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, Textarea } from '@tarojs/components';
import './index.less';
import Topbar from '../../components/topbar/index';
import ProductLi from '../../components/product_li/index';
import Btn from '../../components/btn/index';
import Modal from '../../components/modal/index';

export default class Classify extends Component{

    componentWillMount () { }

    componentDidMount () { }
  
    componentWillUnmount () { }
  
    componentDidShow () { }
  
    componentDidHide () { }
    

    config: Config = {

    }

    state = {
        user: {
            nickname: '胡海国',
            phone: 17702652326,
            address: {
                region: '南城区',
                detailed: '南城步行街，下敦村'
            }
        },
        coupons: {
            id: '12345',
            name: '超级新人券',
            value: 4,
        },
        showModal: true,
        remarks: '',
        serviceCharge: 10,
        products: [

            {
                name: '蓝莓玛奇朵',
                price: 39,
                tips: [ '加奶', '加糖', '中杯' ],
                amount: 1
            },
            {
                name: '蓝莓玛奇朵',
                price: 39,
                tips: [ '加奶', '加糖', '中杯' ],
                amount: 1
            },
            
        ]
        
    }

    mathTotal(products){
        let totalPrice = 0;
        let totalNum = 0;
        
        
        products.forEach( item =>{
            totalPrice += item.amount * item.price;
            totalNum += item.amount;
        })

        return {
            totalPrice,
            totalNum
        };        
    }

    mathAmount(products){
        let total = 0;
        
    }

    toPay(){
        this.switchModal();
    }

    switchModal(){
        this.setState({
            showModal: !this.state.showModal
        })
    }
    
    render(){

        let { products, serviceCharge, remarks, showModal, user, coupons } = this.state;
        let { 
            totalPrice,
            totalNum
         } = this.mathTotal(products);

        let priceList = [

            {
                label: '餐品总计',
                value: totalPrice
            },
            {
                label: '服务费(根据距离变化)',
                value: serviceCharge
            }
            
        ]
         
        let modal:JSX.Element;
        if(showModal){

            modal = (

                <Modal onClick={this.switchModal} >
                    <View className="remind list-card">
                        <View className="list-card-content">
                            为了确保您的用餐体验, 请确认您的信息.
                        </View>
                    </View>

                    <View className="address list-card left">
                        <View className="iconfont icon icon-location"></View>
                        <View className="list-card-content">
                            <View className="contact-info">
                                <Text className="em">
                                    {user.address.region}
                                </Text>
                            </View>
                            <View className="iconfont icon icon-right"></View>
                        </View>
                    </View>


                    

                    <View className="coupons list-card left">
                        <View className="list-card-content">
                            <View className="label">
                                <Text className="em">
                                    礼券
                                </Text>
                                ({coupons.name})
                            </View>
                            <View className="value">
                                -￥{coupons.value}
                            </View>
                        </View>
                    </View>
                    <View className="price list-card left">
                        <View className="list-card-content">

                            <View className="total">

                                {
                                    priceList.map((item, indx) =>{

                                        return (

                                            <View className="Price-item" key={index}>
                                                <Text className="label">
                                                    {item.label}
                                                </Text>
                                                <Text className="value">
                                                   ￥ {item.value}
                                                </Text>
                                            </View>
                                            
                                        )

                                    })
                                }

                                <View className="Price-item price-total">
                                    <Text className="label">
                                        实付
                                    </Text>

                                    <View className="value">
                                        ￥ <Text className="em">{ totalPrice + serviceCharge - coupons.value }</Text>
                                    </View>
                                </View>
                               
                            </View>
                            
                        </View>
                    </View>

                    
                    
                </Modal>
                
            )
            
        }
        
        return (

            <View className="classify page">

                {/* 模态窗 */}
                {modal}

                <View className="top-bar">
                    <Topbar></Topbar>
                </View>
                <View className="list-card left">
                    <Text className="title">
                        订单
                    </Text>
                </View>   
               
                {
                    products.map((item, index) =>{

                        return (

                            <View className="list-card center" key={index}>
                                <View className="list-card-content">
                                    <ProductLi product={item}></ProductLi>
                                </View>
                            </View>
                            
                        )

                    })
                }

                <View className="list-card center">

                    <View className="list-card-content">
                        <View className="total">
                            ￥
                            <Text className="value">
                                {totalPrice}
                            </Text>
                        </View>

                        <View className="total-sub">
                            (根据距离变化) 
                            <Text className="value">
                                另需服务费  ￥{serviceCharge}
                            </Text>
                        </View>
                        
                    </View>
                
                </View>
                

                <View className="remarks">
                    <View className="remarks-remind">
                        <View className=" icon iconfont icon-edit"></View>
                        添加备注(50字内)
                    </View>

                    <Textarea value={remarks} maxlength={50} ></Textarea>

                </View>

                
                <View className="footer">
                    <Btn type={'flex big active'} onClick={this.toPay.bind(this)}>
                        <View className="price">
                            {totalNum}
                        </View>

                        <Text>
                            确认订单
                        </Text>

                        <View className="total">
                            ￥ {totalPrice}
                        </View>
                        
                    </Btn>
                </View>

            </View>
            
        )
        
    }
    
    
}